<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"> 
        <ul>
            <li v-for="item in books">{{item}}</li>
        </ul>
        <input type="button" value="交互" @click="change">
    </div>
</body>
<script src="./vue.js"></script>
<script>

//重排 (回流) 和重绘
// 1. 浏览器执行html 页面时，会经历的过程， 创建 dom树， cssStyleRule ， dom树和cssStyleRule 组合成渲染树， 布局，绘制
// 2.当dom 发生变化时 (指的是删除 ，改变大小，位置等等)   ， 浏览器会重新排列，在重新绘制
// 3.当 dom发生变化时 (指的是 颜色的变化) ， 浏览器值需要重新绘制
// 所以 ，我们就知道 为什么 dom操作比较耗费性能了

// 二：在vue 框架中， 使用虚拟dom 和 diff 算法的结合 ， 尽量最大化的减少(无效的) 重排和重绘
//  1.虚拟dom 就是使用js 对象模拟的真实 dom
//    在 vue2 的狗仔函数里， 会根据 el 对应的dom 及其子节点，产生一个虚拟dom(js对象数组)

// 虚拟的dom模拟
let vDom = [
        {
            tagName:"ul",
            children:[
                {
                    tagName:"li",
                    innerText:"平凡的世界"
                },
                {
                    tagName:"li",
                    innerText:"泰坦尼克号"
                },
                {
                    tagName:"li",
                    innerText:"肖申克的救赎"
                },
            ]
        },
        {
           tagName:"input",
           type:"button",
           value:"交互",
           click:"swapBook" 
        }
    ]












    let vm = new Vue({
        el:"#app",
        data:{
            books:["平凡的世界","泰坦尼克号","肖申克的救赎"]
        },
        methods:{
            change(){
                let first = this.books.shift();
                let last = this.books.pop();
                this.books.push(first);
                this.books.unshift(last);
                console.log(this.books)
            }
        }
    })
</script>
</html>